ใช้ HTML＋JavaScript เรียก API Gateway กับ Lambda ที่สร้างด้วย REST API: Serverless Web App บน AWS : Part 6

บทความนี้ดัดแปลงเนื้อหาบางส่วนมาจาก Hands-on Training ของ Website AWS Official ของญี่ปุ่น สามารถอ่านเนื้อหาต้นฉบับได้ที่ AWS Hands-on for Beginners Serverless #1 サーバーレスアーキテクチャで翻訳 Web API を構築する | AWS Webinar

บทความนี้เป็นส่วนนึงของเนื้อหาในบทเรียนเกี่ยวกับ AWS API Gateway ที่ผมสร้างขึ้นมา คุณผู้อ่านสามารถตรวจสอบเนื้อหาทั้งหมดได้โดยการคลิกที่ชื่อของผม

เป้าหมายใหญ่สุดของบทเรียนนี้คือ การทำ Web app แปลภาษาที่เป็น serverless ครับ

สวัสดีครับ ต้า ครับ

บทความนี้เป็นส่วนนึงของเนื้อหาในบทเรียนเกี่ยวกับ AWS API Gateway ที่ผมสร้างขึ้นมา
ซึ่งผมทำการแยกย่อยๆออกมาโดยเนื้อหาในบทความพวกนี้สามารถจบได้ในตัวของมันเอง

สำหรับหัวข้ออื่นๆ ของบทความนี้ สามารถตรวจสอบได้ที่ช่วงท้ายของบทความครับ

สำหรับบทความนี้เราจะมาทำกันในส่วนนี้ครับ

ในหัวข้อนี้ เราจะมาพาทำส่วนของ Front-end และเพิ่มการตั้งค่า CORS ให้เราสามารถดึงข้อความจาก domain ที่ไม่เหมือนกันมาได้

บทความนี้เราจะมาทำกันใน Singapore Region กันครับ

เริ่มลงมือทำ

ดาวน์โหลดโค้ด

คราวนี้เราจะไปทำหน้าเว็บกัน

ให้เราทำการโหลดไฟล์จาก Github ที่ผมได้เตรียมไว้ในลิ้งค์ด้านล่างนี้

nuta108/aws-translate-app: Translate-app by using AWS service + html css javascript front-end

ให้เราทำการดาวน์โหลดไฟล์มา โดยคลิก Download ZIP ตามในภาพ

ให้เราทำการแตกไฟล์ไว้สักที่นึง โดยผมทำการแตกไฟล์ไว้ใน \translate-app

ให้เราทำการเปิดไฟล์ index.html เพื่อตรวจสอบได้ว่าหน้าเว็บของเราเป็นยังไง

เราสามารถลองพิมพ์คำที่เราอยากจะแปลลงไปได้

แต่จะเห็นได้ว่าจะไม่มีคำแปลอะไร ตอบกลับมา

โดยเราสังเกตด้านขวา เมนูสามารถเปิดได้โดยการกด F12 จะเป็นการแสดง Developer Tools ซึ่งจะแสดงให้เห็นสาเหตุที่ API Gateway ผิดพลาด ซึ่งจากภาพจะเห็นได้มา เราไม่ได้ทำการตั้งค่า CORS จึงเกิด Error ขึ้น

เราต้องตั้งค่าในขั้นต่อไปต่อ

เพิ่ม CORS ใน Lambda

ในการที่เราจะดึงข้อมูลไปแสดงในเว็บที่มีชื่อไม่เหมือนกัน
เราจำเป็นต้องตั้งค่า CORS(Cross-Origin Resource Sharing)
โดยที่เราจำเป็นต้องตั้งค่าทั้งใน Lambda และ AWS Gateway (เนื่องจากดึงข้อมูลมาจากทั้ง 2 service)
หากเราไม่ทำการตั้งค่า CORS จะไม่สามารถแสดงข้อมูลได้

ในฝั่งของ Lambda ให้เราแก้โค้ด ในส่วนข้อมูลที่ใช้ในการ Return ดังต่อไปนี้

[อันเดิม]
    return {
        'statusCode': 200,
        'body': json.dumps({
            'output_text': output_text
        }, ensure_ascii=False),
        'isBase64Encoded': False,
        'headers': {}
    }

[อันใหม่]
    return {
        'statusCode': 200,
        'body': json.dumps({'output_text': output_text}, ensure_ascii=False),
        'isBase64Encoded': False,
        'headers': {
            "Content-Type": "application/json; charset=utf-8",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        }
    }

เพิ่ม CORS ใน API Gateway

การเพิ่ม CORS ใน API Gateway ทำได้ดังนี้

ไปที่ API ที่เราสร้างขึ้น

กดที่หัวข้อ translate

กดหัวข้อด้านขวา Enable CORS

☑เลือกหัวข้อ GET ตามในภาพ
แล้วกด Save

จากนั้นเลือก Deploy API

ในหัวข้อนี้เราสามารถเลือกสร้าง stage ใหม่ได้ แต่ไม่มีความจำเป็นเท่าไร ทางบทความนี้จึงขอใช้เป็น 　Stage:dev เหมือนเดิมครับ

เลือก Stage เป็น dev แล้วกด Deploy ครับ

ทำการ Copy ลิ้งค์ในส่วนของ translate/GET

นำลิ้งค์ API Gateway มาใส่ใน JavaScript + ทดสอบการแปลภาษา

กลับมาเปิดไฟล์ script.js ที่เราโหลดมา

แล้วทำการวางลิ้งค์ที่ก็อบมาใน API_GATEWAY_ENDPOINT

ทำการเซฟไฟล์ แล้วเปิด index.html อีกที
ทำการแปลภาษาแล้วกด Translate แล้วรอสักพักนึง
ถ้าได้คำแปลตามด้านล่างถือว่าโอเคครับ

ทิ้งท้าย

ในบทความนี้ เราได้ทำการโหลดหน้าเว็บ ตั้งค่า CORS แล้วทำการแปลจากในหน้าเว็บกันไปแล้ว แต่จะเห็นได้ว่า ในส่วนหน้าเว็บที่มีคำว่า History ยังไม่มีการแสดงผล ซึ่งเราจะพาไปทำในช่วงต่อไปกัน

บทความ Part อื่นๆ

• ใช้ AWS Lambda เรียกใช้งาน Amazon Translate แปลภาษา : Part 1 | DevelopersIO
• ใช้ API Gateway เชื่อมต่อไปยัง Lambda เรียก API แปลภาษา : Part 2 | DevelopersIO
• ใช้ DynamoDB บันทึกข้อมูลจาก Lambda : Part 3 | DevelopersIO
• แก้ ensure_ascii=False เพื่อให้แปลภาษาอังกฤษ > ไทย แล้วตัวอักษรไม่เพี้ยน : Part 4 | DevelopersIO
• เพิ่มตัวแปรให้เพิ่มรูปแบบการแปลได้หลากหลายมากขึ้น : Part 5 | DevelopersIO
• ดาวน์โหลดโค้ด Front-end และ ตั้งค่า CORS : Part 6 | DevelopersIO
• เพิ่มฟังก์ชัน History ให้สามารถเรียกดูปะวัติการแปลได้ : Part 7 | DevelopersIO
• อัพโหลดเว็บไซต์ขึ้นบน S3 (Hosting Server) : Part 8 | DevelopersIO

บทความอ้างอิง

• AWS Lambda คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS | DevelopersIO
• Amazon API Gateway | การจัดการ API | Amazon Web Services
• CORS คืออะไร - อธิบาย Cross-Origin Resource Sharing - AWS